<template>
  <div>
    <div class="mainImg">
      <img :src="info.poster" alt="" />
      <i class="iconfont icon-zuojiantou" slot="icon" @click="back"></i>
    </div>
    <div class="film-detail">
      <div class="col">
        <div class="nae">
          <span class="a">{{ info.name }}</span>
          <span class="b">{{ info.item.name }}</span>
        </div>
        <div class="grade">{{ info.grade }}分</div>
      </div>
      <div class="text">{{ info.category | kong(info.category) }}</div>
      <div class="text">
        {{ info.premiereAt | getDay(info.premiereAt) }}上映
      </div>
      <div class="text">{{ info.nation }} | {{ info.runtime }}分钟</div>
      <div class="text">
        {{ info.synopsis }}
      </div>
    </div>
    <div class="actors">
      <div class="title">演职人员</div>
      <div class="carouser">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div
              v-for="item in info.actors"
              :key="item.avatarAddress"
              class="swiper-slide"
            >
              <img :src="item.avatarAddress" width="85" alt="" />
              <p>{{ item.name }}</p>
              <p>{{ item.role }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <van-button id="but" type="primary" block color="#ff5f16">选票购座</van-button> -->
  </div>
</template>

<script>
import api from '@/api'
import Vue from 'vue'
import { Button } from 'vant'
import Swiper from 'swiper'
import 'swiper/swiper-bundle.min.css'

Vue.use(Button)
export default {
  data() {
    return {
      info: {
        actors: {
          name: '暂无'
        },
        item: {
          name: 'zhangsan'
        },
        category: 'a|b'
      }
    }
  },
  filters: {
    getDay(a) {
      var date = new Date(a * 1000)
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      var nowDate = year + '-' + month + '-' + day
      return nowDate
    },
    kong(str) {
      str = str.split('|')
      return str.join(' | ')
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    }
  },
  created() {
    this.$store.commit('yin')
    this.$store.commit('hide')
    // 获取传过来的id
    const id = this.$route.query.id
    // 发送请求
    this.$http.get(api.getFmInfo + '?filmId=' + id).then((res) => {
      // console.log(res)
      // console.log(res.data.film)
      this.info = res.data.film
      // console.log(this.info)
    })
  },
  mounted() {
    var swiper = new Swiper('.mySwiper', {
      slidesPerView: 3,
      spaceBetween: 30,
      freeMode: true
    })
    console.log(swiper)
  },
  beforeDestroy() {
    this.$store.commit('show')
  }
}
</script>

<style scoped lang='scss'>
.mainImg {
  width: 100%;
  background: rgb(249, 249, 249);
  opacity: 1;
  display: block;
  height: 180px;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  img {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
  }
  i {
    display: block;
    position: absolute;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    height: 30px;
    width: 30px;
    font-size: 22px;
    text-align: center;
    line-height: 30px;
    top: 5px;
    left: 5px;
  }
}
.film-detail {
  padding: 15px;
  padding-top: 12px;
  background-color: #fff;
  .col {
    display: flex;
    align-items: center;
    .nae {
      width: 256px;
      .a {
        color: #191a1b;
        font-size: 18px;
        height: 24px;
        line-height: 24px;
        margin-right: 7px;
      }
      .b {
        font-size: 9px;
        color: #fff;
        background-color: #d2d6dc;
        height: 14px;
        line-height: 14px;
        padding: 0 2px;
        border-radius: 2px;
        display: inline-block;
      }
    }
    .grade {
      width: calc(100% - 250px);
      text-align: right;
      color: #ffb232;
    }
  }
  .text {
    font-size: 13px;
    color: #797d82;
    margin-top: 4px;
  }
}
.actor {
  position: relative;
  .swiper-slide {
    position: absolute;
    z-index: 3;
    display: flex;
  }
}
.swiper-slide {
  width: 85px;
  margin: 0 5px;
}
</style>
